import React,{PureComponent} from 'react'
import Topic from './components/Topic'
import List from './components/List'
import Recommend from './components/Recommend'
import Write from './components/Write'
import { connect } from 'react-redux'
import { actionCreators } from './store'

import { 
    HomeWrapper,
    HomeLeft,
    HomeRight,
    BackTop
 } from './style'
//PureComponent必须和immutable结合使用
class Home extends PureComponent{
    //只有和数据相关的组件才会重新渲染
    
    handleScrollTop(){
        window.scrollTo(0,0)
    }
    
    render(){
        return (
            <HomeWrapper>
                <HomeLeft>
                    <img 
                    className="banner-img"
                    src="//upload.jianshu.io/admin_banners/web_images/4613/e96eece16a9e3ae1699dd4bd0002666c571c30f5.jpeg?imageMogr2/auto-orient/strip|imageView2/1/w/1250/h/540" alt=""/>
                    <Topic/>
                    <List/> 
                </HomeLeft>
                <HomeRight>
                    <Recommend/>
                    <Write/>
                </HomeRight>
                {
                    
                    this.props.showScroll? <BackTop onClick={this.handleScrollTop}>返回顶部</BackTop>:null
                }
                
            </HomeWrapper>
        )
    }
    componentDidMount(){
        this.props.changeHomeData()
        this.bindEvents();
    }
    bindEvents(){
        window.addEventListener('scroll',this.props.changeScrollTopShow)
    }
    
}
const mapDispatch=(dispatch)=>({
    changeHomeData(){
        dispatch(actionCreators.getHomeInfo());
    },
    changeScrollTopShow(){
        if(document.documentElement.scrollTop>100){
            dispatch(actionCreators.toggleTopShow(true))
   
        }else{
            dispatch(actionCreators.toggleTopShow(false))
        }
    }
})
const mapState=(state)=>({
    showScroll:state.getIn(['home','showScroll'])
})

export default connect(mapState,mapDispatch)(Home);